<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./dhtmlxgantt.css">
</head>

<body>
    <div id="gantt_here" style='width:100%; height:100vh;'></div>
    <script src="./dhtmlxgant.js"></script>
    <script>
        console.log(gantt.config);
        gantt.config.date_format = "%Y-%m-%d $%H:%M";
        gantt.config.readonly = true;
        gantt.config.autoscroll = true
        gantt.config.columns = [
            {
                name: 'text',
                label: '里程碑节点',
                width: 280,
                template: function (obj) {
                    return `节点：${obj.text}`; // 通过 template 回调可以指定返回内容值
                },
            },
        ];


        gantt.init("gantt_here");
        gantt.parse({
            data: [
                
                { id: 2, text: "任务1", start_date: "2019-08-01 00:00",end_date:"2020-08-06 8:00"},
                { id: 3, text: "任务2", start_date: "2019-08-06 00:00", duration: 2, },
                { id: 3, text: "任务Copy", start_date: "2019-08-09 00:00", duration: 2, },
                { id: 5, text: "Task #3.1", start_date: "2019-08-09 00:00", duration: 2, },
                { id: 6, text: "Task #3.2", start_date: "2019-08-11 00:00", duration: 1, }
            ],
        });
    </script>
</body>

</html>